import Vue from 'vue'

const component = {
    template: `
        <div>
            <input type="text" v-model="text">
            <span v-show="active">see me active</span>
            <br>
            <span v-text="propOne" @click="handleChange"></span>
        </div>
    `,
    data(){
        return {
            text: 0
        }
    },
    // 
    mounted(){
        console.log(this.$parent.$options.name)
    },
    props: {
        active: Boolean,
        propOne: String,
    },
    methods: {
        handleChange(){
            this.$emit("change")
        }
    }
}

const component2 = {
    extends: component,
    data() {
        return {
            text: 1
        }
    },
    mounted(){
        // 改变父组件的值
        this.$parent.text = '12345'
    }
}



new Vue({
    name: 'root',
    el: "#root",
    components: {
        Comp: component2
    },
    data:{
        text:2332
    },
    template: `
        <div>
            <comp></comp>
            <span>{{text}}</span>
        </div>
    `
})


// const ComVue = Vue.extend(component)
// new ComVue({
//     el: '#root',
//     propsData:{
//         propOne: 'xxx'
//     },
//     data: {
//         text: 123
//     },
//     mounted(){
//         console.log('comp mounted')
//     }
// })

